<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-07-24
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-07-24
 * @FilePath: /element-admin/src/views/ProjectCampDrawer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="ProjectCampDrawer-page" class="both-center">
    <!-- bodyer -->
    <div class="drawer-bodyer">
      <el-row class="row fstRow clearfix">
        <el-button @click="handle_close()" size="small">关闭</el-button>
        <el-button type="primary" plain @click="handle_refesh" size="small">刷新</el-button>
        <el-button type="info" plain @click="handle_init" size="small">清空表单数据</el-button>
        <el-button type="success" plain @click="handle_save" size="small" >保存</el-button>
      </el-row>

      <el-row class="row fstRow clearfix">
        <!-- 上侧项目内容栏-->
        <el-col :span="24" style="height: auto;">
          <div class="col-sm-12" style="width: 1080px">
            <el-card class="card-top-container" v-loading="isLoading">
              <template #header>
                <div class="card-header">
                  <span style="font-size: 22px;">系统字典详细数据</span>
                </div>
              </template>
              <el-form :model="SysDict" label-width="140px">
                <el-form-item label="数据分类">
                  <el-col :span="6">
                    <el-select v-model="SysDict.col" placeholder="数据分类" size="small">
                      <el-option label="请选择数据分类" value=-1></el-option>
                      <el-option :label="item.label" :value=item.value :data="item" v-for="item in colOpts"
                                 v-bind:key="item.value"></el-option>
                    </el-select>
                    <el-input v-model="SysDict.col" placeholder="数据分类" size="small" :clearable="true"
                              maxlength="20"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="字典索引">
                  <el-col :span="6">
                    <el-input v-model="SysDict.key" placeholder="字典索引" size="small" :clearable="true"
                              maxlength="20"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="字典索引英字">
                  <el-col :span="6">
                    <el-input v-model="SysDict.key_eng" placeholder="字典索引英字" size="small" :clearable="true"
                              maxlength="20"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="字典释义">
                  <el-col :span="24">
                    <el-input v-model="SysDict.val" placeholder="字典释义" size="small" type="textarea"
                              rows="8"
                              :clearable="true"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="索引说明">
                  <el-col :span="24">
                    <el-input v-model="SysDict.emo" placeholder="字典释义" size="small" type="textarea"
                              rows="10"
                              :clearable="true"></el-input>
                  </el-col>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {add, fetchOne, update, fetchCalOpt} from "@/api/SysDictsApi";
import {Loading} from 'element-ui';

export default {
  name: "SysDictInfo",
  components: {},
  data() {
    return {
      initFlg: true,
      isLoading: false,
      loadingInstance: null,
      fullscreenLoading: false,
      labelWidth: "140px",
      id: 0,
      SysDict: {
        id: 0,
        key: "",
        key_eng: "",
        col: "",
        val: "",
        emo: "",
      },
      colOpts:[],
    }
  },
  props: {
    drawId: {type: [Object, Number], default: 0}
  },
  computed: {},
  methods: {
    handle_init() {
      this.SysDict = this.init_obj();
      this.loadDictCalOpt();
    },
    handle_refesh() {
      this.handle_init();
      this.handle_dict_fetch(this.id);
    },
    handle_save() {
      this.SysDict.mems_json = JSON.stringify(this.project_trans_value);
      if (this.initFlg) {
        add({data: this.SysDict}).then((result) => {
          if (result.code == 200) {
            this.$notify({title: '执行成功', message: '数据执行完成', type: 'success', offset: 100});
            this.handle_init();
            this.$emit('fMethod', true);
          }
        })
      } else {
        update({id: this.id, data: this.SysDict}).then((result) => {
          if (result.code == 200) {
            this.$notify({title: '执行成功', message: '数据执行完成', type: 'success', offset: 100});
            this.handle_init();
            this.$emit('fMethod', true);
          }
        })
      }
    },
    async handle_dict_fetch(id) {
      this.isLoading = true;
      await fetchOne({"id": id}).then(res => {
        if (res.code == 200) {
          this.SysDict = res.data;
          this.isLoading = false;
        }
      }).catch(err => {
        // Message.error('错了哦，STEP 1 参数异常' + err);
        this.$notify({title: '执行失败', message: '数据读取异常' + err, type: 'error', offset: 100});
      })
    },
    handle_close() {
      this.handle_init();
      this.$emit('fMethod');
    },
    async loadDictCalOpt(){
      await fetchCalOpt().then(res => {
        if (res.code == 200) {
          this.colOpts = res.data;
        }
      }).catch(err => {
        // Message.error('错了哦，STEP 1 参数异常' + err);
        this.$notify({title: '执行失败', message: '数据读取异常' + err, type: 'error', offset: 100});
      })
    },
    formattedNumber(number) {
      const num = parseFloat(number); // 先将传入的值转换成浮点数类型
      if (!isNaN(num)) { // 判断是否能正常转换成数字
        return num.toFixed(2).toString(); // 返回保留两位小数后的结果
      } else {
        return ''; // 若传入值无法转换成数字，则返回空字符串
      }
    },
    init_obj() {
      return {
        id: 0,
        key: "",
        key_eng: "",
        col: "",
        val: "",
        emo: "",
      }
    },
  },
  created() {
    let options = {fullscreen: true}
    this.loadingInstance = Loading.service(options);
    this.loadingInstance.close();
  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        if (drawId == 0) {
          this.initFlg = true;
          this.handle_init();
        } else {
          this.initFlg = false;
          this.handle_dict_fetch(drawId);
          this.id = drawId;
        }
      }
    }
  }
}
</script>

<style scoped>
li {
  list-style-type: none;
}

.fstRow {
  margin-top: 0px;
  display: flex;
  padding: 5px 5px 5px 5px;
}

.card-top-container {
  display: block;
  padding: 5px;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

#container > div {
  margin: 5px;
  width: 400px; /*宽度根据实际情况调节，应与上面一致*/
  overflow: auto; /*防止内容溢出导致布局错位*/
}
</style>